import React, { Component } from "react";
import PropTypes from "prop-types";

export default class TodoAdd extends Component {
  static propTypes = {
    // 接收的 add prop 必须是一个函数，且必须传递
    add: PropTypes.func.isRequired,
  };

  inputRef = React.createRef();

  handleClick = () => {
    // this.props.add("张三");
    // 为了避免父组件没有传递 add 函数时，我们上面的代码会报错 add is not a function 如下处理
    // this.props.add && this.props.add("张三");

    // 取值
    // this.inputRef.current // DOM对象
    const value = this.inputRef.current.value.trim();
    // 做个简单的判断，如果value有内容才去新增，否则不处理
    if (value) {
      this.props.add && this.props.add(value);
    }
  };

  render() {
    return (
      <div className="todo-add">
        <input
          ref={this.inputRef}
          type="text"
          className="todo-add__input"
          placeholder="请输入内容"
        />
        <button className="todo-add__button" onClick={this.handleClick}>
          新增
        </button>
      </div>
    );
  }
}
